<template>
  <div class="">
    <div class="flex items-center p-2 border-b">
      <div class="pr-2">
        <el-avatar
          :size="50"
          :src="'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'"
        ></el-avatar>
      </div>
      <div class="">
        <h6 class="text-4 flex items-center hover:cursor-pointer hover:text-red">
          {{ "暂无昵称" }}
          <el-icon><ArrowRight /></el-icon>
        </h6>
        <div class="flex py-1">
          <span
            class="text-sm text-secondary text-gray-500 mr-2 hover:cursor-pointer hover:text-red-500"
            @click="handleLogout"
            >切换账号</span
          >
          <span
            class="text-sm text-secondary text-gray-500 hover:cursor-pointer hover:text-red-500"
            @click="handleLogout"
            >退出</span
          >
        </div>
      </div>
    </div>
    <div class="py-2 flex items-center justify-around gap-2">
      <div class="icon-card">
        <el-icon :size="25"><User /></el-icon>
        <span class="text-3 py-1 text-gray-500">PLUS 权益</span>
      </div>
      <div class="icon-card">
        <el-icon :size="25"><User /></el-icon>
        <span class="text-3 py-1 text-gray-500">PLUS 权益</span>
      </div>
      <div class="icon-card">
        <el-icon :size="25"><User /></el-icon>
        <span class="text-3 py-1 text-gray-500">PLUS 权益</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ArrowDown, ArrowRight, User, ShoppingTrolley } from "@element-plus/icons-vue";
const handleLogout = () => {};
</script>
<style scoped lang="scss">
@mixin icon-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5px 3px;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
}
.plus-icon {
  width: 40px;
  background-color: #f5f5f5;
  padding: 0.5px 2.5px;
}
.icon-card {
  @include icon-style;
}
</style>
